<script setup>

import {ref, watchEffect} from "vue";
import dayjs from "dayjs";
import {baseUrl, reqInstance} from "@/utils/request/index.js";
import {message} from "ant-design-vue";

const visible = ref(false)

const emit = defineEmits(['create-completed'])

const formData = ref({
  id: 0,
  estimated_money: 0,
  actual_money: 0,
  receivable_status: 0,
})

const openDraw = (data) => {
  visible.value = true
  formData.value =  data
}

const doSave = async ()=>{
  let url = "receivable/actual/" + formData.value.id
  let method = "put"
  formData.value.actual_money = parseFloat(formData.value.actual_money)
  try {
    await reqInstance({
      url: url,
      method: method,
      data: formData.value
    })
    message.success("保存成功")
    emit('create-completed')
    visible.value = false
  } catch (e) {

  }
}


watchEffect(() => {
  if(formData.value.actual_money <= 0) {
    formData.value.receivable_status = 0
  } else if (formData.value.actual_money > 0 && formData.value.actual_money < formData.value.estimated_money){
    formData.value.receivable_status = 1
  } else {
    formData.value.receivable_status = 2
  }
})

defineExpose({openDraw})
</script>

<template>
  <a-drawer
      v-model:open="visible"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      title="实收账款管理"
      placement="right"
  >
    <a-form layout="vertical" :model="formData">
      <a-form-item prop="actual_money" label="实收金额">
        <a-input v-model:value="formData.actual_money" placeholder="请输入应收金额" />
      </a-form-item>
      <a-form-item label="状态">
        <a-radio-group v-model:value="formData.receivable_status"  button-style="solid">
          <a-radio-button :value="0">未收</a-radio-button>
          <a-radio-button :value="1">部分</a-radio-button>
          <a-radio-button :value="2">已收</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="doSave">保存</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<style scoped>

</style>